<template>
	<view class="conact-content" style="background-color: #f8f8f8;">
		<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
		<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
		<z-paging ref="paging" v-model="dataList" @query="queryList"  :default-page-size="4" :fixed="false" :auto="true"    use-chat-record-mode >
			<view class="" slot="top" style="background-color: #F8F8F8;">
				<u-navbar class="navbar" :border-bottom="false" :background="{'background':'#F8F8F8'}" :title="title" :title-size="36" :title-bold="true" :title-color="textColor">
				</u-navbar>
			</view>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="u-p-l-35 u-p-r-35  message-list" >
				<view class="message-item" :id="`z-paging-${index}`"  v-for="(item,index) in dataList" :key="item.id" >
					<view class="message-item-date">{{ disabledDate(item.pushTime )}}</view>
					<view class="message-item-info">
						<view class="message-item-top u-p-30">
							<view class="message-item-title"  v-if="item.title">
								{{item.title}}
							</view>
							<view class="message-details" v-if="item.contentType === 1">{{item.content}}</view>
							<view class="message-details" v-if="item.contentType === 2"> 
								<text v-html="item.content"></text>
							</view>
							<view class="message-details" v-if="item.contentType === 3">
								<image :src="item.content" mode="" style="width: 100%;display: block;margin: 0 auto;"></image>
							</view>
							<view class="message-details-list" v-if="item.contentType === 6">
								<view class="message-details-item u-flex"  v-for="(child,index) in JSON.parse(item.content)" :key="index">
									<view class="message-details-name" v-if="child.isVisible"> {{child.key}}</view>
									<view class="message-details-info u-flex" v-if="child.isVisible">
										<view class=""  v-if="child.icon!== ''&&child.icon" >
											<image :src="child.icon" mode="" class="message-details-icon"></image>
										</view>
										<view class="message-details-text" :style="{fontWeight:child.isBolder?'bold':'none',color:child.colorHex}">
											{{child.value||'无'}}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="message-item-bot" v-if="item.links" @click="toPage(item.fromId,item.links)">{{item.messageType ===1?'查看详情':'查看订单' }}</view>
					</view>
				</view>
			</view>
			
			
		</z-paging>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				title:'',
				messageType:0,
			}
		},
		// onPageScroll(e) {
		// 	//如果滚动到顶部，触发加载更多聊天记录
		// 	if (e.scrollTop < 10) {
		// 		this.$refs.paging.doChatRecordLoadMore();
		// 	}
		// },
		
		onLoad(options) {
			if(options.type == 0||options.type == 1){
				this.title = '订单消息'
			}
			if(options.type == 2){
				this.title = '系统消息'
			}
			this.messageType = Number(options.type);
		},
		methods: {
			async queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
					messageType:this.messageType
				};
				uni.showLoading({
					title: 'loading...',
					mask: false
				});
				const res = await this.$newHttp.get('api/Message/GetNotificationsByUser', { params: params } );
				uni.hideLoading({
					title: 'loading...'
				});
				if(res.code === 200){
					this.$refs.paging.complete(res.data.list);
				}else{
					this.$refs.paging.complete(false);
				}
			},
			// 时间格式化 前一天和当前时间
			disabledDate(time) {
				var date = new Date(time).getDate();
				var now = new Date().getDate();
				if (date < now) {
					return this.$fui.dateFormatter(time,'y-m-d h:i');
				} else {
					return this.$fui.dateFormatter(time,'hh:MM');
				}
			},
			async toPage(id,type) {
				if(type == 'Purchase'){
					this.$mRouter.push({ route: '/pages/purchase/order/xiangqing?id=' + id });
				}else if(type == 'Sale'){
					this.$mRouter.push({ route: '/pages/sale/order/xiangqing?id=' + id });
				}else{
					this.$mRouter.push({ route: '/pages/public/xiaoxi/webview?src=' + type });
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.conact-content{
		height: 100%;
		.message-list{
			.message-item{
				margin-bottom: 40rpx;
				.message-item-date{
					text-align: center;
					margin-bottom: 30rpx;
					color: #666;
				}
				.message-item-info{
					background-color: #fff;
					border-radius: 10rpx;
					.message-item-top{
						.message-item-title{
							font-size: 28rpx;
							color: #999;
							margin-bottom: 30rpx;
						}
						.message-details-list{
							.message-details-item{
								margin-bottom: 10rpx;
								.message-details-name{
									min-width: 118rpx;
									font-size: 28rpx;
									color: #999;
									margin-right: 20rpx;
								}
								.message-details-info{
									.message-details-icon{
										width: 32rpx;
										height: 32rpx;
										border-radius: 50%;
										margin-right: 12rpx;
									}
									.message-details-text{
										font-size: 28rpx;
										color: #333;
									}
								}
							}
						}
					}
					.message-item-bot{
						text-align: center;
						box-sizing: border-box;
						padding: 30rpx 0;
						border-top: 1px solid #eaeaea;
						font-size: 28rpx;
						color: #999;
					}
				}
				
			}
		}
	}
	
</style>
